<template>
	<view class="index-page page">
		<scroll-view :scroll-y="true" class="content" @scrolltolower="scrollViewBottom">
			<loading v-if="showLoading"></loading>
			<CustomNav :normal="{ textColor: '#fff', background: '#FF2F34' }" title="益联生态"></CustomNav>
			<view class="search-block">
				<view class="search-item">
					<view class="input-block">
						<view class="input-left">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
								mode=""></image>
							<input placeholder="请输入关键字" v-model="conf.businessName" @confirm="search" />
						</view>
						<view class="search" @click="search">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="info-block">
				<!-- <view class="title FangZhengHanZhenGuangBiaoJianTi">我的钱包</view> -->
				<view class="gift-block">
					<view class="gift-item">
						<view class="gift-name">益联券</view>
						<view class="gift-price FangZhengHanZhenGuangBiaoJianTi">{{voucher}}</view>
					</view>
					<view class="gift-item">
						<view class="gift-name">益积分</view>
						<view class="gift-price FangZhengHanZhenGuangBiaoJianTi">{{integral}}</view>
					</view>
				</view>
				<view class="sign-block block" v-if="show===1">
					<view class="sign">
						已连续签到
						<text class="day">{{ info.continuousSignInDay }}天</text>
					</view>
					<view class="sign-item">
						<view v-for="(item,index) in info.continueSignDay" :key="index" class="sign-list"
							@click="sisignIn" :class="item + 1 <= info.continuousSignInDay ? 'active' : ' '">
							<image
								src="https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp//images/small_integral.png"
								class="sign-img"></image>
							<view class="sign-text FZHZGBJ">{{ info.signIntegral }}</view>
						</view>
					</view>
					<view class="text">连续签到满{{ info.continueSignDay }}天，最后一日+{{ info.continueSignIntegral }}积分</view>
				</view>

				<view class="title FangZhengHanZhenGuangBiaoJianTi">交易专区</view>
				<view class="transaction-block">
					<view class="transaction-item" @click="navigate('/page_other/integral/shopping?applyType=1')">
						<view class="transaction-name FangZhengHanZhenGuangBiaoJianTi">线上购物专区</view>
						<view class="transaction-text">超多好物在线选购</view>
					</view>
					<view class="transaction-item" @click="navigate('/page_other/integral/shopping?applyType=2')">
						<view class="transaction-name FangZhengHanZhenGuangBiaoJianTi">本地生活专区</view>
						<view class="transaction-text">超多折扣到店兑换</view>
					</view>
				</view>
				<!-- <view class="shop-block block">
					<view class="title-item">
						<view class="title">积分商城</view>
						<view class="text" @click="navigate('/page_other/integral/shopping')">更多</view>
					</view>
					<view class="shop-item">
						<template v-if="shopList.length>0">
							<view class="shop-list" v-for="(item, index) in shopList" :key="item.id"
								@click="navigate('/page_other/integral/intergralDetail?id='+item.id)">
								<image :src="cloudStorage+item.goodsFace" class="shop-img"></image>
								<view class="name">{{ item.name }}</view>
								<view class="score">{{ item.integral }}积分</view>
							</view>
						</template>
						<view v-else>暂无数据</view>
					</view>
				</view> -->
				<!-- <view class="top-block">
					<view class="classify-tab-block">
						<view class="tab-content" style="flex-grow: 1;overflow: hidden;">
							<view :class="mallType==0?'active':''" class="tab-item" @click="getMallType(0)">全部</view>
							<view v-for="(item,index) in tabList" :key="item.id" :class="mallType==item.id?'active':''"
								class="tab-item" @click="getMallType(item.id)">{{ item.name }}
							</view>
						</view>
					</view>
				</view> -->
				<view class="title FangZhengHanZhenGuangBiaoJianTi">商品专区</view>
				<view class="screen">
					<view class="all">
						<picker class="text" :range="industry" range-key="name" :value="industryIndex"
							@change="bindIndustry">
							{{industry[industryIndex]['name']}}
						</picker>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(1)" :class="sort==1?'active':''">价格</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(2)" :class="sort==2?'active':''">智能排序</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
				</view>
				<view class="list-block">
					<template v-if="list.length > 0">
						<view class="info-list" v-for="(item,index) in list" :key="item.id"
							@click="navigate('/page_other/integral/detail?id='+item.id)">
							<view class="info-item">
								<image :src="cloudStorage+item.goodsFace" class="img" mode="aspectFill"></image>
								<view class="describe-item">
									<view class="name">{{item.name}}</view>
									<view class="describe">{{item.label}}</view>
									<view class="wage">￥{{item.integral}}积分+{{item.voucher}}券</view>
								</view>
							</view>
						</view>
					</template>
					<view v-if="more==false&&list.length==0" style="width:100%;text-align: center;">暂无数据</view>
					<view v-else-if="more==false&&list.length>0" style="width:100%;text-align: center;">没有更多了</view>
				</view>
			</view>
			<view class="sign-pop" v-if="signShow == true">
				<view class="sign-block">
					<image
						src="https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp//images/raffle-pop.png"
						class="sign-img"></image>
					<view class="pop-item">
						<view class="sign-title">签到成功！</view>
						<view class="score" v-if="info.continuousSignInDay < info.continueSignDay">
							+{{ info.signIntegral }}</view>
						<view class="score" v-else>+{{ info.continueSignIntegral }}</view>
						<view class="days">已连续签到{{ info.continuousSignInDay }}天</view>
						<view class="pop-btn" @click="signShow = false">知道了</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<Tabbar style="position: fixed; left: 0; bottom: 0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/Tabbar/Tabbar';
	import {
		getGoodsTypeList,
		getIntegralGoodsList,
		getIntegralRuleApi,
		getUserGoodsList,
		sisignInApi
	} from '@/api/integral.js';
	import {
		getUserIntegralRecordList,
		getUserVoucherRecordList
	} from '@/api/mine.js'
	import {
		getStorage
	} from '@/util/auth.js'
	import {
		isMore
	} from '@/util/util.js'

	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				name: '',
				type: 0,
				mallType: 0,
				tabList: [],
				signShow: false,
				info: {
					continueSignDay: 0,
					signIntegral: 0,
					continueSignIntegral: 0,
					continuousSignInDay: 0
				},
				list: [],
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				shopList: [],
				lat: '',
				lng: '',
				show: 0,
				voucher: 0,
				integral: 0,
				form: {
					isIndustry: '',
				},
				sort: 0,
				industryIndex: 0,
				industry: [],
			};
		},
		async onLoad() {
			uni.showCustomLoading();
			Promise.all([this.getUserGoodsList(true), this.getGoodsTypeList(), this
				.getIntegralGoodsList(), this.getVoucher(), this.getIntegral(),
			]).finally(() => {
				uni.hideCustomLoading()
			})
			const userInfo = getStorage('user');
			this.isVip = userInfo.vip;
			if (getStorage('token')) {
				this.getIntegralRule()
				this.show = 1
			}
		},
		onShow() {
			Promise.all([this.getVoucher(), this.getIntegral()]).finally(() => {
				uni.hideCustomLoading()
			})
		},
		methods: {
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.conf.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserGoodsList(true)
			},
			scrollViewBottom() {
				if (this.more) {
				
					this.conf.page++;

					uni.showLoading({
						title: '加载中',
						mask: true
					})
					this.getUserGoodsList()
				}
			},
			screen(e) {
				this.sort = e
				this.page = 1
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserGoodsList(true)
			},
			getVoucher() {
				return getUserVoucherRecordList({
					page: 1,
					limit: 10,
				}).then(res => {
					this.voucher = res.voucher
				})
			},
			getIntegral() {
				return getUserIntegralRecordList({
					page: 1,
					limit: 10,
				}).then(res => {
					this.integral = res.integral
				})
			},
			getMallType(e) {
				this.mallType = e
				this.type = this.mallType
				this.conf.page = 1
				this.getUserGoodsList(true)
			},
			search() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserGoodsList(true)
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserGoodsList(true)
			},
			// scrollViewBottom() {
			// 
			// 	if (this.more) {
			// 		this.conf.page++;
			// 		uni.showLoading({
			// 			title: '加载中',
			// 			mask: true
			// 		})
			// 		this.getUserGoodsList()
			// 	}
			// },
			//用户查询商品列表
			getUserGoodsList(refresh = false) {
				
				return getUserGoodsList({
					page: this.conf.page,
					limit: this.conf.limit,
					// applyType: 1,
					type: this.form.isIndustry,
					name: this.conf.businessName,
					sort: this.sort
				}).then((res) => {
					
					
					let list = res.list || [];
					if (refresh) {
						this.list = list;
					
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
			
				})
			},
			//用户查询商品列表(积分商城栏的列表)
			getIntegralGoodsList() {
				return getIntegralGoodsList({
					page: 1,
					limit: 3,
				}).then((res) => {
					this.shopList = res.list
				})
			},
			//获取所有商品类型
			getGoodsTypeList() {
				return getGoodsTypeList().then((res) => {
					//this.tabList = res
					let list = res || []
					var obj = {
						id: 0,
						name: '全部分类'
					}
					list.unshift(obj)
					this.industry = list
					this.menuList = list.filter(item => item.id !== 0);
				})
			},
			getIntegralRule() {
				return getIntegralRuleApi().then((res) => {
					this.info = res;
				});
			},
			sisignIn() {
				if (getStorage('token')) {
					if (this.isVip == 1) {
						sisignInApi().then((res) => {
							if (res.continuousSignInDay) {
								this.signShow = true;
								this.info.continuousSignInDay = res.continuousSignInDay;
								this.getIntegral()
							} else this.showToast(res);
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '需要先开通会员！',
							cancelText: '先逛逛',
							confirmText: '去开通',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/page_other/become_member/index'
									})
								}
							}
						})
					}
				}
				// uni.showModal({
				// 	title: '提示',
				// 	content: '需要先登录！',
				// 	cancelText: '先逛逛',
				// 	confirmText: '去登录',
				// 	success(res) {
				// 		if (res.confirm) {
				// 			uni.reLaunch({
				// 				url: '/page_other/mine/mine'
				// 			})
				// 		} else {
				// 			uni.navigateBack();
				// 		}
				// 	}
				// })
			},
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserGoodsList();
			}
		}
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
			height: calc(100vh - 160rpx);
			overflow-y: auto;
			position: relative;

			.search-block {
				width: 100%;
				height: 200rpx;
				margin-top: 160rpx;
				background-color: #FF2F34;
				padding: 30rpx;
			}

			.search-item {
				width: 100%;
				height: 70rpx;
				display: flex;


				.address-block {
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					border-radius: 50px;
					margin-right: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					.address {
						color: #FF2F34;
						font-size: 28rpx;
					}
				}

				.input-block {
					display: flex;
					background-color: #FFFFFF;
					border-radius: 50px;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 6rpx 6rpx 6rpx 20rpx;

					.input-left {
						width: calc(100% - 140rpx);
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							// margin-right: 5rpx;
							margin: 7rpx 7rpx 0 0;
						}

						input {
							border-radius: 50px;
							width: 100%;

						}
					}

					.search {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 130rpx;
						border-radius: 50rpx;
						height: 100%;
						padding-bottom: 5rpx;
						color: #FFFFFF;
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
					}
				}
			}

			.info-block {
				position: relative;
				background-color: #f7f6f9;
				border-radius: 50rpx 50rpx 0 0;
				padding: 30rpx;
				margin-top: -60rpx;

				.sign-block {
					// margin-top: -120rpx;
					background-color: #FFFFFF;
					padding: 30rpx;
					border-radius: 20rpx;

					.sign {
						font-size: 30rpx;

						.day {
							color: #FF2F34;
						}
					}

					.sign-item {
						display: flex;
						margin-top: 30rpx;

						.sign-list:last-child {
							margin-right: 0;
						}

						.sign-list.active {
							background-color: #fcbf05;
							color: #fff;
						}

						.sign-list {
							width: calc((100% - 60rpx) / 7);
							margin-right: 10rpx;
							background-color: #eeeeee;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border-radius: 15rpx;
							padding: 8rpx 0;
							color: #bebaba;

							.sign-img {
								width: 60rpx;
								height: 60rpx;
							}

							.sign-text {
								margin-top: 4rpx;
							}
						}
					}

					.text {
						text-align: center;
						margin-top: 20rpx;
						color: #767676;
						font-size: 28rpx;
					}
				}

			}

			.sign-pop {
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.2);
				z-index: 999;
				width: 100vw;
				height: 100vh;

				.sign-block {
					width: calc(100% - 260rpx);
					height: 500rpx;
					background: #fff;
					z-index: 99;
					position: fixed;
					transform: translate(-50%, 0%);
					left: 50%;
					bottom: 29%;
					display: flex;
					flex-direction: column;
					box-shadow: 0 0 6px 0px #dadada;
					border-radius: 50rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.sign-img {
						z-index: 100;
						width: 280rpx;
						height: 280rpx;
						position: absolute;
						left: 50%;
						transform: translate(-50%, 0%);
						margin-top: -140rpx;
					}

					.pop-item {
						width: 100%;
						margin-top: 60rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 30rpx;

						.sign-title {
							font-size: 36rpx;
							margin-left: 40rpx;
						}

						.score {
							font-size: 46px;
							color: #FF2F34;
							font-weight: bold;
						}

						.days {
							font-size: 32rpx;
							color: #767676;
						}

						.pop-btn {
							width: calc(100% - 40rpx);
							height: 90rpx;
							color: #fff;
							font-size: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 60rpx;
							background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);

							margin-top: 30rpx;
						}
					}
				}
			}

			.title {
				font-size: 32rpx;
				margin: 30rpx 0;
			}

			.gift-block {
				display: flex;
				align-items: center;
				width: 100%;
				height: 220rpx;
				background: url('https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/bg_1.png') no-repeat center;
				background-size: 100%;
				padding: 30rpx;

				.gift-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 100rpx;

					.gift-name {
						margin-bottom: 20rpx;
						font-size: 32rpx;
					}

					.gift-price {
						font-size: 32rpx;
					}
				}
			}

			.transaction-block {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.transaction-item {
					width: calc(50% - 12rpx);
					height: 220rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 30rpx;
					color: #fff;

					.transaction-name {
						margin-bottom: 20rpx;
					}

					.transaction-text {
						font-size: 22rpx;
					}
				}

				.transaction-item:first-child {
					background: url('https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/bg_2.png') no-repeat center;
					background-size: 100%;
				}

				.transaction-item:last-child {
					background: url('https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/bg_3.png') no-repeat center;
					background-size: 100%;
				}
			}

			.shop-block {
				margin-top: 20rpx;
				border-radius: 20rpx;
				padding: 30rpx;
				background-color: #f8edc9;

				.title-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
						font-weight: bold;
					}

					.text {
						font-size: 28rpx;
						color: #FF2F34;
					}
				}

				.shop-item {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.shop-list:nth-child(3) {
						margin-right: 0;
					}

					.shop-list {
						width: calc((100% - 40rpx) / 3);
						margin-right: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: #fff;
						border-radius: 20rpx;
						padding: 20rpx;

						.shop-img {
							width: 100%;
							height: 120rpx;
						}

						.name {
							font-size: 24rpx;
							margin-top: 20rpx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.score {
							font-size: 22rpx;
							background: linear-gradient(to right, #fa7a22, #fa3822);
							padding: 6rpx 15rpx;
							border-radius: 40rpx;
							color: #fff;
							margin-top: 30rpx;
						}
					}
				}
			}

			.screen {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				margin-top: 30rpx;

				.all {
					display: flex;
					align-items: center;

					.text {
						font-size: 28rpx;
						color: #3D3D3D;
						margin-right: 10rpx;
					}

					.text.active {
						color: #FF2F34;
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.list-block {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom: 30rpx;


				.info-list {
					background: #fff;
					margin-top: 20rpx;
					border-radius: 20rpx;
					width: calc((100% - 20rpx) / 2);
					margin-right: 20rpx;

					.info-item {
						width: 100%;
						display: flex;
						flex-direction: column;

						.img {
							width: 100%;
							height: 360rpx;
							border-radius: 20rpx 20rpx 0 0;
						}

						.describe-item {
							padding: 30rpx;

							.name {
								font-size: 32rpx;
								font-weight: bold;
								margin-bottom: 15rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.describe {
								color: #828282;
								font-size: 28rpx;
								margin-bottom: 15rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.wage {
								color: #157DFA;
								font-weight: bold;
								font-size: 30rpx;

								.txt {
									font-size: 38rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.info-list:nth-child(2n) {
					margin-right: 0;
				}
			}

			.top-block {
				width: 100%;
				// padding: 30rpx;
				display: flex;
				flex-direction: column;
				// background: linear-gradient(to right, #2AC6FF, #6585FD);
				// height: 200rpx;
				margin-top: 20rpx;

				.classify-tab-block {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: relative;
					margin-top: 20rpx;

					.tab-content {
						display: flex;
						flex-direction: row;
						//justify-content: space-around;
						overflow-x: scroll;

						.tab-item {
							padding: 10rpx;
							font-size: 30rpx;
							margin-right: 20rpx;
							flex: none;
							color: #FF2F34;
						}

						.tab-item.active {
							font-size: 32rpx;
							color: #FF2F34;
							font-family: 'FangZhengHanZhenGuangBiaoJianTi';
						}
					}

					.iconfont {
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}
				}
			}
		}
	}
</style>